<!-- 地址列表 -->
<template>
    <div class="main" >
          <!-- 地址头部 -->
       <div class="address-top">
            <el-space wrap :size="10">
                <el-input v-model="input" placeholder="请输入管理员名称" clearable  @keyup.enter.native="search"/>
                <el-button type="primary" :icon="Search" @click="search">查找</el-button>
            </el-space>
        </div>
        <!-- 地址列表 -->
        <div class="address-table">
            <el-table :data="tableData" border style="width: 100%;">
                <el-table-column prop="id" label="地址ID" align="center" width='80'/>
                <el-table-column prop="userId" label="用户ID" align="center" width='80'/>
                <el-table-column prop="consignee" label="签收人" align="center" />
                <el-table-column prop="phone" label="手机号" align="center" />
                <el-table-column prop="province" label="省份" align="center" />
                <el-table-column prop="city" label="城市" align="center" />
                <el-table-column prop="county" label="区/县" align="center" />
                <el-table-column prop="address" label="详情地址" align="center" />
            </el-table>
        </div>
          <!-- 分页组件 -->
        <div>
            <Paging v-bind="pagingDatas" @page-change="pageChange" ></Paging>
        </div>
        <el-backtop :right="100" :bottom="100" ref="main" target=".main" :visibility-height="20" />
    </div>
</template>
<script  setup lang="ts">
import { nextTick, reactive, ref, watch } from 'vue' 
import { Search } from '@element-plus/icons-vue'  
import { ClassPagination } from "#/index"; 
import Paging from "@/components/paging/Paging.vue";
import { get} from "@/utils/http";
import { ElMessage} from 'element-plus'
let input = ref('')//搜索框
let main = ref()  //滚动组件对象的引用
let userId = ref('') //传递用户搜索id
const tableData: TypeAddress[] = reactive([]) //地址列表
//分页数据
let pagingDatas = reactive(new ClassPagination())

/** 角色列表 */
const addressLise = ()=>{
    //角色列表请求数据
      let data = {
        _gp:'admin.address',
        _mt:'list',
        userId:userId.value,
        page:pagingDatas.page,
        limit:pagingDatas.limit
      }
     get(data).then((res)=>{
         if(200==res.errno){
            tableData.length = 0 //清空数组
            tableData.push(...res.data.items)  //添加进地址列表数组
            pagingDatas.total = res.data.total //添加进管理员列表数组
         }else{
            ElMessage.error(res.errmsg)
            tableData.length = 0
            pagingDatas.total = 0
         }
     })
}

//** 搜索 */
const search = () => {
    userId.value = input.value
    pagingDatas.page = 1
    addressLise()
}
//分页组件每次调用事件
function pageChange(e: TypePaGing) {
    pagingDatas.page = e._page
    pagingDatas.limit = e._limit
    addressLise()
    nextTick(() => {
        main.value.$el.click?.()
    })
}
addressLise()
</script>
<style scoped lang="less">
    .address-top {
    margin: 15px 0px;

    .el-input {
        width: 15vw;
    }
}
</style>